import { IRouteComponentProps } from 'umi';
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
import { Breadcrumb, Layout, Menu, Button } from 'antd';
import React, { useState, useEffect } from 'react';
import useBreadcrumb from '../hooks/breadcrumb';

import styles from './index.less';
import items from './MenuItem';
import LocalCache from '../../utils/cache';

const { Header, Content, Footer, Sider } = Layout;

export default function BasicLayout({
  children,
  location,
  route,
  history,
  match,
}: IRouteComponentProps) {
  // console.log(route, location);
  const [collapsed, setCollapsed] = useState(false);
  const logout = () => {
    LocalCache.deleteCache('token');
    history.push('/login');
  };
  return (
    <div className={styles.contain}>
      <Layout className={styles.leftLayout}>
        <Sider
          width={150}
          collapsedWidth={0}
          collapsed={collapsed}
          onCollapse={(value: any) => setCollapsed(value)}
        >
          <div className={styles.leftBox}>管理系统</div>
          <Menu
            className={styles.antdMenu}
            theme="dark"
            defaultSelectedKeys={['1']}
            mode="inline"
            items={items}
            onSelect={(rec) => {
              // console.log(rec.key);
              history.push(rec.key);
            }}
          />
        </Sider>
        <Layout>
          <Header className={styles.topHeader}>
            <Button
              type="primary"
              onClick={(value: any) => setCollapsed(!collapsed)}
            >
              {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button>
            <Button type="primary" onClick={() => logout()}>
              退出登录
            </Button>
          </Header>
          <Content className={styles.antdContent}>
            <Breadcrumb className={styles.antdBreadcrumb}>
              <Breadcrumb.Item>系统</Breadcrumb.Item>
              {useBreadcrumb({ route, location })}
            </Breadcrumb>
            <div style={{ padding: 16, minHeight: 360 }}>{children}</div>
          </Content>
        </Layout>
      </Layout>
    </div>
  );
}
